<script>
    var divString = '<div><div id="success_rate" style="width: 400px;height:400px;display:inline-block"></div>'
    divString = divString + '<div id="cancellation_rate" style="width: 400px;height:400px;display:inline-block"></div>'
    divString = divString + '<div id="answer_time" style="width: 400px;height:400px;display:inline-block"></div></div>'
    layui.$(".layui-body").html(divString)
    //初始化ehcharts实例
    var successRateChart =echarts.init(document.getElementById("success_rate"));
    var cancellationRateChart =echarts.init(document.getElementById("cancellation_rate"));
    var answerTimeChart =echarts.init(document.getElementById("answer_time"));
    successRateChart.showLoading();
    cancellationRateChart.showLoading();
    answerTimeChart.showLoading();
    var loadFlag = true;
    //指定图表的配置项和数据
    successRateOption = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 50, name: '成交率'}]
            }
        ]
    };

    cancellationRateOption = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 50, name: '取消率'}]
            }
        ]
    };

    answerTimeOption = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter: '{value}秒'},
                data: [{value: 50, name: '平均应答时间'}]
            }
        ]
    };

    function get_performance() {
        layui.$.ajax({
            type : "get",
            async : false,  //同步请求
            url : "http://localhost:8080/statistics/real_time",
            success:function(data){
                update_state(data);
            },
            error: function() {
                //layui 弹出层
            }
        })
    }

    function update_state(data) {
        var performance_data = JSON.parse(data);
        successRateOption.series[0].data[0].value = performance_data['success_rate'] * 100;
        cancellationRateOption.series[0].data[0].value = performance_data['expired_rate'] * 100;
        answerTimeOption.series[0].data[0].value = performance_data['avg_answer_time'];
        successRateChart.setOption(successRateOption, true);
        cancellationRateChart.setOption(cancellationRateOption, true);
        answerTimeChart.setOption(answerTimeOption, true);
    }

    var timerId = setInterval(function () {
        if(loadFlag = true) {
            successRateChart.hideLoading();
            cancellationRateChart.hideLoading();
            answerTimeChart.hideLoading();
        }
        loadFlag = false
        get_performance();
    },5000);

    timerIds.push(timerId);
</script>

